<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
        #box {
            width: 300px;
            height: 466px;
            /* border: 1px solid #000; */
            margin: 0 auto;
            overflow: hidden;
        }

        #box ul {
            height: 30px;
            background-color: #F5F5F5;
            color: #999999;
            display: flex;
            font-size: 10px;
            margin-bottom: 20px;
        }

        #box ul li {
            width: 100px;
            line-height: 30px;
            text-align: center;
            transition: 0.3s;
        }

        #box ul .a {
            border-right: 1px solid #E1E1E1;
        }

        #box #box1 {
            width: 100%;
            display: flex;
            position: relative;
            left: 000%;
        }

        #box #box1 #a,
        #box #box1 #b,
        #box #box1 #c {
            width: 100%;
            flex-shrink: 0;
        }

        #box #box1 #a #a1,
        #box #box1 #b #b1 {
            margin-bottom: 20px;
        }

        #box #box1 #a #a1 h3,
        #box #box1 #b #b1 h3 {
            margin-left: 20px;
            margin-top: 20px;
        }

        #box #box1 #a #a1 span,
        #box #box1 #b #b1 span {
            font-size: 12px;
            color: #999999;
            margin-left: 20px;
        }

        #box #box1 #a #a2,
        #box #box1 #b #b2 {
            display: flex;
            justify-content: space-between;
        }

        #box #box1 #c {
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        #box #box1 #c img {
            height: 173px;
        }

        #box ul li.active {
            border-bottom: 2px solid orange;
        }
    </style>
</head>

<body>
    <div id="box">
        <ul>
            <li class="a">最新英雄</li>
            <li class="a">最新皮肤</li>
            <li>周免英雄</li>
        </ul>
        <div id="box1">
            <div id="a">
                <div id="a1">
                    <img src="./imgs/1_wz.jpg" alt="">
                    <h3>新英雄：姬小满</h3>
                    <span>上线时间:2023.04.15</span>
                </div>
                <div id="a2">
                    <img src="./imgs/2_wz.webp" alt="">
                    <img src="./imgs/3_wz.webp" alt="">
                    <img src="./imgs/4_wz.webp" alt="">
                    <img src="./imgs/5_wz.webp" alt="">
                </div>
            </div>
            <div id="b">
                <div id="b1">
                    <img src="./imgs/6_wz.jpg" alt="">
                    <h3>新皮肤：匿光破解者-沈梦溪</h3>
                    <span>上线时间:即将上线</span>
                </div>
                <div id="b2">
                    <img src="./imgs/7_wz.jpg" alt="">
                    <img src="./imgs/8_wz.webp" alt="">
                    <img src="./imgs/9_wz.jpg" alt="">
                    <img src="./imgs/10_wz.webp" alt="">
                </div>
            </div>
            <div id="c">
                <img src="./imgs/11_wz.webp" alt="">
                <img src="./imgs/12_wz.webp" alt="">
                <img src="./imgs/13_wz.webp" alt="">
                <img src="./imgs/14_wz.webp" alt="">
                <img src="./imgs/15_wz.webp" alt="">
                <img src="./imgs/16_wz.webp" alt="">
                <img src="./imgs/12_wz.webp" alt="">
                <img src="./imgs/16_wz.webp" alt="">
            </div>
        </div>
    </div>
    <script src="./vendor/jquery-3.6.4.js"></script>
    <script>
        $('#box>ul>li').mouseover(function () {
            $(this).addClass('active').siblings().removeClass('active')
            const i = $(this).index()
            console.log({ i })
            $('#box1').stop().animate({ left: `-${i}00%` })
        }).eq(0).mouseover()
    </script>
</body>

</html>